import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'umi'
import { Modal, Card, Tabs, Radio, Row, Col, Space } from 'antd';
import { settle_type, CommissionType } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import { useUpdateEffect } from 'ahooks';
const SelelctModel = (props) => {
  const { loading, list, visible = {}, onClose, onOk } = props;
  const { show = false, details = [] } = visible;
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [active, setActive] = useState('stage')
  const modalProps = {
    title: `选择佣金配置`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    zIndex: 1001,
    okText: '确认',

  };
  useEffect(() => {
    if (visible) {
      setSelectedRowKeys([...selectedRowKeys, ...details])
    }
    else {
      setSelectedRowKeys([])
    }
  }, [visible])
  const childRef = useRef();
  const rowSelection = {
    type: 'radio',
    hideSelectAll: true,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),

    preserveSelectedRowKeys: true,
  };
  const TabList = [{
    label: '阶段分佣',
    key: 'stage',
  },
  {
    label: '级别分佣',
    key: 'level',
  },]
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const onChange = (e) => {
    setActive(e.target.value);
  };
  useUpdateEffect(() => {
    handleCallback()
  }, [active])

  const getColumns = [
    {
      title: '分佣方式名称',
      dataIndex: 'commissionName',
    },
    {
      title: '分佣方式描述',
      dataIndex: 'commissionDesc',
    },
    {
      title: '佣金方式',
      dataIndex: 'commissionType',
      render: (e) => {
        return CommissionType[e]
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (e) => {
        return {
          0: '禁用',
          1: '启用'
        }[e]
      }
    },
  ];

  return (
    <Modal
      {...modalProps}
      onCancel={onClose}
      onOk={() => {
        onOk && onOk(selectedRowKeys);
        onClose();
      }}
    >
      <Space size={'large'} direction='vertical' style={{ width: '100%', }}>
        <Row>
          <Col span={24}>
            <Radio.Group
              value={active}
              onChange={onChange}
              style={{
                marginBottom: 16,
              }}
            >
              {TabList.map((item, index) => {
                return <Radio.Button key={index} value={item.key}>{item.label}</Radio.Button>
              })}
            </Radio.Group>
          </Col>
        </Row>

        <TableDataBlock
          // searchItems={searchItems}
          rowSelection={rowSelection}
          params={{ commissionType: active, status: '1' }}
          columns={getColumns}
          loading={loading}
          cRef={childRef}
          rowKey={(record) => `${record.id}`}
          {...list}
          dispatchType='commission/fetchListOrganizationCommission'
        ></TableDataBlock>
      </Space>

    </Modal>
  )
}
export default connect(({ loading, commission }) => ({
  list: commission.organizationCommissionList,
  loading: loading.models.commission,
}))(SelelctModel);

